<template>
  <div id="liftNum">
    <ul>
      <li>
        <img src="../../assets/tu1.png" alt="" />
        <h5>{{ liftNum }}</h5>
        <p>直梯数量</p>
      </li>
      <li>
        <img src="../../assets/tu2.png" alt="" />
        <h5>{{ escalatorsNum }}</h5>
        <p>扶梯数量</p>
      </li>
    </ul>
  </div>
</template>
<script scoped>
export default {
  data() {
    return {
        liftNum: 0, // 直梯数量
        escalatorsNum: 0, //扶梯数量
    };
  },
  methods: {
    // 获取安防态势数据
    getstall() {
      stall()
        .then((res) => {
          console.log(res);
          this.liftNum = res.data.一般告警;
          this.escalatorsNum = res.data.紧急告警;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getstall();
    },
  },
  mounted() {
    // this.getstall();
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 188;
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
};
</script>
<style scoped lang="less">
#liftNum {
  display: flex;

  width: 370px;
  height: 170px;
  padding: 0.2rem 0.15rem;
  box-sizing: border-box;
}

ul {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
}

li {
  position: relative;
  text-align: center;
  color: #fff;
}

p {
  font-size: 14px;
  font-weight: bold;
}

img {
  width: 100px;
  height: 100px;
}

li h5 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 38% 0;
  font-weight: 600;
  font-size: 22px;
}
</style>
